<template>
  <div>
    <div class="operation-group">
      <el-button
        plain
        type="single-number"
        @click="$refs.staffSelector.showDialogInventory()"
      >
        新增
      </el-button>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        class="ccui-form-child-table"
        :data="useRangeList"
        :max-height="411"
        border
      >
        <el-table-column
          show-overflow-tooltip
          label="序号"
          type="index"
          align="center"
        />

        <el-table-column
          show-overflow-tooltip
          prop="applyOrgName"
          label="公司名称"
        />

        <el-table-column
          show-overflow-tooltip
          prop="affiliatedUnit"
          label="所属单位"
        />

        <el-table-column
          show-overflow-tooltip
          prop="rangeOfApply"
          label="合同范围说明"
        />

        <el-table-column
          show-overflow-tooltip
          prop="operationTime"
          label="操作时间"
        />

        <el-table-column label="操作" width="120">
          <template slot-scope="{ $index }">
            <el-button
              v-if="$index !== 0"
              @click.native.prevent="deleteRow($index)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <staffSelector
      ref="staffSelector"
      selectedTitle="已选择"
      title="选择使用范围"
      :showBtnTest="false"
      :requestTreeFunction="getQryTree"
      :requestSeachFunction="queryMemberGroup"
      @selectedStaffSuccess="selectedStaffSuccess"
    />
  </div>
</template>

<script>
import staffSelector from "@/basa/components/public/staffSelector";
import { dateFormat1, proxyDateFormat, uniqueByJson } from "@/basa/utils";
import { mapGetters } from "vuex";
import { queryMemberGroup, getQryTree } from "@/basa/api";
export default {
  name: "useRange",
  components: { staffSelector },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    // 是否是变更页面引用
    isChange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      useRangeList: [],
      searchInputArr: [],
      tableHeadOptions: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if ((!this.isChange && this.detail.state === "edit") || this.isChange) {
        this.useRangeList = this.detail.smpUsableRange.map(n => ({
          ...n,
          operationTime: n.operationTime
            ? proxyDateFormat(n.operationTime)
            : "",
          applyOrgId: n.applyOrgId.toString()
        }));
      }
    },

    deleteRow(i) {
      this.useRangeList.splice(i, 1);
    },

    // 提交验证
    handleSubmit() {
      return new Promise((resolve, reject) => {
        if (this.useRangeList.length) resolve(this.useRangeList);
        reject("fourth");
      });
    },

    selectedStaffSuccess(arr) {
      const pushData = arr.map((_, i) => ({
        applyOrgId: _.orgId,
        applyOrgName: _.name,
        affiliatedUnit: _.orgFullName,
        // rangeOfApply: _.isLeaf ? "本级" : "本级及以下",
        rangeOfApply: "本级",
        operationTime: dateFormat1(new Date()),
        isChangeFlag: 1
      }));

      // 去重
      this.useRangeList = uniqueByJson(
        [...this.useRangeList, ...pushData],
        "applyOrgId"
      );
    },
    getQryTree,
    queryMemberGroup
  },
  computed: {
    ...mapGetters(["getRangeObj"])
  },
  watch: {
    getRangeObj(newVal) {
      const arr = this.useRangeList.filter(_ => _.orgId);
      const obj = {
        sn: 0,
        ...newVal,
        applyOrgId: newVal.orgId,
        applyOrgName: newVal.name,
        affiliatedUnit: newVal.orgFullName,
        rangeOfApply: "本级",
        operationTime: dateFormat1(new Date())
      };

      if (arr && arr.length) {
        const index = this.useRangeList.findIndex(
          _ => _.orgId === arr[0].orgId
        );

        this.useRangeList.splice(index, 1, obj);
      } else {
        this.useRangeList.push(obj);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
.el-group-title.ccui-group-wrapper .extend-btn {
  right: 68px;
}
.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
</style>
